<template>
  <!--字符云图-->
  <div id="skuChart" ref="topicCloud" style="height:400px;"></div>
</template>
<script type="text/javascript">
  import {panelTitle} from 'components'
  import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item";

  require('echarts-wordcloud');


  export default {
    name: 'wordCloudChart',
    props: ['wordCloudData'],
    data() {
      return {
        cloudOption: this.wordCloudData,
      }
    },
    components: {
      ElFormItem,
      panelTitle
    },
    updated() {
      this.drawChart()
    },
    mounted() {
      this.drawChart()
    },
    methods: {
      drawChart() {
        console.log(this.cloudOption)
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.topicCloud, 'shine');
        var option = {
          title: {
            text: '',
          },
          tooltip: {
            show: true
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          series: [{
            name: '话题趋势',
            type: 'wordCloud',
            size: ['80%', '80%'],
            rotationRange: [0, 0],
            textPadding: 0,
            textStyle: {
              normal: {
                color: '#65cea7',
              }
            },
            autoSize: {
              enable: true,
            },
            data: this.cloudOption
          }]
        }
        myChart.setOption(option, true)
      },
    }
  }
</script>

<style>
</style>
